<template>

  <div class="home"  >
    <div class="ceng" v-if="isCeng" @touchmove.stop.prevent="touchmovehandle">
      <div class="point">
        <div>
        <image src="/static/tabs/1574315735(1).jpg" class="imag"></image>
        </div>
        <p class="smallp">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;使用微信授权登录后才允许操作哦~ &nbsp;&nbsp;&nbsp;&nbsp;</p>
        <div class="divvv"></div>
      <button @getuserinfo="getVxUserInfo" open-type="getUserInfo" v-if="!userName" class="btn">安全登录</button>
        <!--<button open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">获得手机号</button>-->
      </div>
    </div>
  </div>
</template>

<script>
  export default {
        name: "login",
    data(){
      return{
        userName:"",
        isCeng:true,
        userinfo:{},  //存放用户信息，保存在自己的数据库中,
        userInfoplus:{},
        flag:0,
      }
    },
    mounted(){
      this.isLogin()
    },
    methods:{
      getVxUserInfo(e){
        if(e.target.userInfo){
          this.userName=e.target.userInfo.nickName;
          this.isCeng=false;
          this.isLogin();
          this.flag=1
          this.$emit("updateif",this.flag);
        }else{
          this.userName="";
          this.isCeng=true;
          this.$emit("updateif",this.flag);
        }
      },
      isLogin(){
        var _this=this;
        wx.getSetting({
          success(res) {
            if (!res.authSetting['scope.userInfo']) {//未授权getUserInfo
              wx.authorize({
                scope: 'scope.getUserInfo',
                success(res) {
                  _this.flag=1;
                  console.log('1.'+_this.flag);
                  _this.isCeng=false;
                  _this.userName=res.target.userInfo.nickName;
                },
                fail(err){
                  console.log(err)
                }
              })
            }else{//已授权
              wx.getUserInfo({
                success(res) {
                  _this.loginOk(res)
                  console.log('进入授权');
                },
                fail(err) {
                  console.log(err)
                }
              })
            }
          }
        });
        this.$forceUpdate();
      },
      touchmovehandle(){ //解决vue蒙层滑动穿透问题

      },
      loginOk(res){  //登录成功后的信息处理
        let _this=this;
        _this.userinfo.encryptedData=res.encryptedData;
        _this.userinfo.iv=res.iv;
        _this.userinfo.rawData=res.rawData;
        _this.userinfo.signature=res.signature;
        _this.userinfo.infos=res.userInfo;
        _this.getOpenId()
        _this.isCeng=false;
        _this.userName=res.userInfo.nickName;
        wx.setStorage({
          key:"userInfo",
          data:res.userInfo,
        })
        console.log('2.'+this.flag);
        if(this.flag===1){
        //    wx.reLaunch({
        //   url: '/pages/index/main'
        // });
        }
      },
      getOpenId(){  //获取用户的openid
        let _this=this;
        wx.login({
          success(res) {
            if (res.code) {
              // 发起网络请求
             wx.request({
                // url: 'http://127.55.69.223:8888/api/member/login',
               url: 'https://pjsh.xuebaeasy.com/api/member/login',
               method: 'POST',
                data: {
                  code: res.code,
                  userInfo:_this.userinfo.infos
                },
                success(res) {
                  _this.userInfoplus.openid=res.data.openid;
                  _this.userInfoplus.session_key=res.data.session_key;
                  _this.userInfoplus.memberId=res.data.memberId;
                  _this.userInfoplus.token=res.data.token;
                  wx.setStorage({
                    key:"userInfoplus",
                    data:_this.userInfoplus,
                  });
                  }
             })
            }
            // else {
            //   console.log('登录失败！' + res.errMsg)
            // }
         }

        })
      },
      getPhoneNumber(e){
        console.log(e.mp.detail);

      },
    }
    }
</script>

<style scoped>

  .home{
    padding-bottom: 140rpx;
    z-index: 100;
  }
  .btn{
   background-color: #00c300;
    color: white;
    width: 60%;
    margin-bottom: 10px;
    font-weight: 400;
    margin-top: 10px;
  }

  .title{
    text-align: right;
    font-size: 15px;
    padding-right: 30rpx;
    padding-top: 30rpx;
  }
  .name{
    color: royalblue;
  }
  .ceng{
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0,0,0,0.8);
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
  }
  .point{
   background-color: white;
  }
  .smallp{
    margin-top: 10px;
    margin-bottom: 20px;
    color: gray;
  }
  .divvv{
    height: 1px;
    width: 100%;
    background-color: rgba(201, 201, 201,1);
  }
  .imag{
    height: 50px;
    width: 70px;
    margin-top: 10px;
    margin-left: 110px;
  }
</style>
